<template>
    <div>
         <van-nav-bar
            placeholder 
            fixed
            title="不凡"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />

            <div class="branddetail">
                <div class="banner">
                    <img :src="listinfo.app_list_pic_url" alt="">
                </div>
                <p>{{listinfo.simple_desc}}</p>
               
           
            </div>
              <p class="msg">{{msg}}</p>
              <div class="goodslist">
                        <div class="goodslist-item" v-for="item in goodslist" :key="item.id">
                                <img :src="item.list_pic_url" alt="">
                                <p>{{item.name}}</p>
                                <p>￥{{item.retail_price}}</p>
                        </div>
                        
              </div>
    </div>
</template>

<script>
import{ detailaction} from "../../../api/Home/index.js"
    export default {
        data() {
            return {
                listinfo:[],
                goodslist:[],
                msg:"",
            }
        },
        methods:{
           onClickLeft(){
               this.$router.go(-1)
           }
        },
        created(){
                 detailaction(
                    { id:this.$route.params.listinfo.id}
                 ).then(res=>{
                       this.listinfo =res.data
                       console.log(this.listinfo,"信息");
                       this.goodslist = res.goodsList
                    //    console.log(this.goodslist,"列表");
                       if(this.goodslist.length==0){
                           this.msg = "暂无更多数据"
                       }else {
                           this.msg = "商品列表"
                       }
                 })
        }
    }
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}
   .branddetail {
       width: 100%;
       height: 400px;
       img {
           width: 100%;
           height: 100%;
       }
       p {
           display: block;
           width: 100%;
           color: #666;
           font-size: 16px;
           padding: 20px;
           background-color: #fff;
           box-sizing: border-box;
          
       }
     
   }
     .msg {
           display: block;
           width: 100%;
           font-size: .42667rem;
           color: #999;
           text-align: center;
       }
       .goodslist {
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-content: space-between;
           flex-wrap: wrap;;
           .goodslist-item {
               width: 4.96667rem;
               height: 240px;
               background-color: #fff;
               margin-top: 5px;;
               img {
                   display: block;
                   width: 151px;
                   height: 151px;
                   margin: 0 auto;
               }
               :nth-child(2){
                   font-size: .32rem;
                    text-align: center;
                    margin-top: 5px;
               }
                :nth-child(3){
                   font-size: .4rem;
                    text-align: center;
                    color: #b4282d;
                    margin-top: 10px;

               }
           }
           
           
       }
</style>